<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百分比进度条</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#big{
				margin: 20px 30px;
				width: 500px;
				height: 33px;
				border: 1px solid black;
				
			}
			#big #small{
				width: 0px;
				height: 33px;
				background: green;
				text-align: center;
				line-height: 33px;
			}
			#btn{
				margin: 50px 30px;
			}
			p{
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="big">
		<div id="small"><p id="o"></p></div>
		</div>
		<input type="button" value="点我" id="btn"/>
		<script>
			var btn=document.getElementById('btn');
			var o=document.getElementById('o');
			var small=document.getElementById('small');
			btn.onclick=function(){
				var cl=setInterval(time,1000);
				var i=0;
				function time(){
					if(i>=10){
						clearInterval(cl);
						
					}else{
						i++;
						small.style.width=i*50+'px';
						o.innerHTML=i*10+'%';
					}
				}
			}
			
		</script>
	</body>
</html>